<template>
	<Tabs>
		<TabPane label="营销中心">
			<div class="ui-app-cells">
				<div class="ui-app-cells__item" v-for="(item, index) in marketLists" :key="index" @click="handleRoute(item)">
					<div class="icon">
						<!--<img v-if="item.icon" :src="item.icon" />-->
						<Icon :custom="'xz-icon xz-icon-' + item.icon" size="30" color="#ffffff" />
					</div>
					<div class="info">
						<div class="title">{{ item.title }}</div>
						<div class="ui-ellipsis desc">{{ item.describe }}</div>
					</div>
				</div>
			</div>
		</TabPane>
	</Tabs>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			apps: [
				{
					title: '优惠券',
					desc: '向客户发送优惠券，多种类型优惠券均有',
					icon: require('@/images/app/icon_app_coupon.png'),
					open: 1,
					route: 'app_market_coupon_index'
				},
				{
					title: '优惠券组合',
					desc: '向客户一次性发放多张优惠券',
					icon: require('@/images/app/icon_app_coupon_group.png'),
					open: 1,
					route: 'app_market_coupon_index'
				},
				{
					title: '限时促销',
					desc: '设置商品在规定时间内的优惠活动',
					icon: require('@/images/app/icon_app_flashsale.png'),
					open: 1,
					route: 'app_market_flashSale_index'
				},
				{
					title: '满减满赠',
					desc: '订单满足一定条件享受优惠活动',
					icon: require('@/images/app/icon_app_freduction.png'),
					open: 1,
					route: 'app_market_fullReduceGift_index'
				},
				{
					title: '超值换购',
					desc: '订单满足一定金额和加钱换购优惠商品',
					icon: require('@/images/app/icon_app_redemption.png'),
					open: 0,
					route: ''
				},
				{
					title: '组合套餐',
					desc: '设置多个商品组合享受一个优惠价',
					icon: require('@/images/app/icon_app_combo.png'),
					open: 0,
					route: ''
				},
				{
					title: '赠品',
					desc: '设置赠品，回馈下单用户',
					icon: require('@/images/app/icon_app_gift.png'),
					open: 0,
					route: ''
				},
				{
					title: '多人拼团',
					desc: '引导客户要求好友一起裂变享受优惠',
					icon: require('@/images/app/icon_app_pintuan.png'),
					open: 0,
					route: ''
				},
				{
					title: '满包邮',
					desc: '设置订单满额/件既享包邮',
					icon: require('@/images/app/icon_app_freedelivery.png'),
					open: 0,
					route: ''
				},
				{
					title: '第二件折扣',
					desc: '设置商品购买第二件享受减价或折扣',
					icon: require('@/images/app/icon_app_seconddiscount.png'),
					open: 0,
					route: ''
				},
				{
					title: '积分商城',
					desc: '使用积分免费/加价兑换礼品',
					icon: require('@/images/app/icon_app_integralmall.png'),
					open: 0,
					route: ''
				},
				{
					title: '分销',
					desc: '把顾客变为你的分销员帮你裂变',
					icon: require('@/images/app/icon_app_distribution.png'),
					open: 0,
					route: ''
				},
				{
					title: '多倍积分',
					desc: '设置指定商品在规定时间内享受多倍积分',
					icon: require('@/images/app/icon_app_multipleintegral.png'),
					open: 0,
					route: ''
				},
				{
					title: '礼品卡',
					desc: '发放礼品卡促进复购率',
					icon: require('@/images/app/icon_app_giftcard.png'),
					open: 0,
					route: ''
				},
				{
					title: '社群团购',
					desc: '发动社群渠道，快速裂变',
					icon: require('@/images/app/icon_app_groupbuy.png'),
					open: 0,
					route: ''
				}
			]
		}
	},
	computed: {
		marketLists() {
			return this.$store.state.app.marketLists;
		}
	},
	mounted() {
		
	},
	methods: {
		handleRoute(item) {
			if(item.route) {
				this.$router.push({name: item.route});
			}else{
				this.$Message.warning('努力开发中，敬请期待！');
			}
		}
	}
}
</script>

<style lang="less">
.ui-app-cells {
	margin-left: -20px;
	&__item {
		display: inline-block;
		float: left;
		position: relative;
		margin-left: 20px;
		margin-bottom: 20px;
		padding: 15px 15px 15px 75px;
		width: calc(~"33.3333% - 20px");
		/*width: 365px;*/
		height: 90px;
		border-radius: 3px;
		background-color: #f0f0f0;
		overflow: hidden;
		cursor: pointer;
		transition: all .2s ease-in-out;
		.icon {
			position: absolute;
			top: 15px;
			left: 15px;
			padding: 15px;
			/*width: 60px;
			height: 60px;
			line-height: 60px;*/
			text-align: center;
			border-radius: 5px;
			background-color: #1ba2fc;
			overflow: hidden;
			img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
		.info {
			padding-left: 10px;
			line-height: 30px;
			.title {
				font-size: 16px;
			}
			.desc {
				font-size: 14px;
			}
		}
	}
	/*&__item:hover {
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
	}*/
}
</style>